<template>
  <view class="buy4">
    <view class="money">
      <view class="black"> 买入金额 </view>
      <view class="input">
        <input
          type="text"
          v-model="data.currentTurnover"
          placeholder="最低买入1.00元"
        />
        <image
          src="../../../static/iamges/dingqihuangjin/caca.png"
          :class="!data.currentTurnover ? 'eliminate' : ''"
          @click="eliminate"
        ></image>
      </view>
      <view class="earnings">
        <text>最低</text>
        {{ data.money }}
        <text>起购</text>
      </view>
    </view>

    <view class="payment">
      <view>付款方式</view>
      <view>
        <view>
          <view>我的钱包</view>
          <view>最多支付30000.00元</view>
        </view>
        <image
          src="../../../static/iamges/maichu/fanhui@2x.png"
          class="image"
        ></image>
      </view>
    </view>

    <view class="checkbox-group">
      <checkbox-group @change="add">
        <label>
          <checkbox
            value="add"
          />基金销售服务由惠通金融提供，我已阅读并同意<text
            >产品相关协议</text
          ></label
        >
      </checkbox-group>
    </view>
    <view class="code">
      <input type="text" placeholder="请输入验证码" v-model="data.code" />
      <button @click="code">获取验证码</button>
    </view>
    <button @click="purchase(data)">立即购买</button>
    <view class="txt">
      <view>基金销售服务由惠通金融服务有限公司提供</view>
      <view>基金有风险，投资需谨慎</view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("current");
export default {
  onLoad: function (option) {
    // 动态表头
    wx.setNavigationBarTitle({
      title: option.currentName,
    });
    console.log(option, "ppppppp");
    this.data.currentName = option.currentName;
    this.data.currentId = option.currentId - 0;
    this.data.money = option.money;
    this.data.currentTurnover = option.money;
  },

  data() {
    return {
      data: {
        buyMode: "walletPay",
        code: "11111",
        currentId: 0,
        currentName: "",
        currentTurnover: "1",
        money: "",
      },
    };
  },
  methods: {
    ...mapActions(["getCode", "buyCurrent"]),
    add() {},
    eliminate() {
      this.data.currentTurnover = "";
    },
    // 短信验证
    async code() {
      const value = await this.getCode({
        userTel: uni.getStorageSync("userTel"),
      });
      console.log(value, "vvvvv");
      if (value.code == 10001) {
        this.$refs.uToast.show({
          title: "获取验证码成功，2分钟内有效",
          type: "success",
        });
      }
    },
    // 购买
    async purchase(data) {
      console.log(data);
      const value = await this.buyCurrent(data);
      console.log(value, "活期");

      if (value.code == 10010 && value.data.code) {
        this.$refs.uToast.show({
          title: "用户短信验证码不能为空",
          type: "error",
        });
      } else if (value.code == 10010 && value.data.currentTurnover) {
        this.$refs.uToast.show({
          title: "购买金额不能为空",
          type: "error",
        });
      } else if (value.code == 10012) {
        this.$refs.uToast.show({
          title: "验证码错误",
          type: "error",
        });
      } else if (value.code == 10007) {
        this.$refs.uToast.show({
          title: "购买失败，不能低于最低购买金额",
          type: "error",
        });
      } else if (value.code == 10038) {
        this.$refs.uToast.show({
          title: "当前用户余额不足/输入最低购买金额不正确",
          type: "error",
        });
      }
      if (value.code == 10030 && value.data) {
        console.log("购买成功");
        uni.navigateTo({
          url:
            "/pages/buy/buySucceed/buySucceed?money=" +
            value.data +
            "&name=" +
            this.data.currentName +
            "&url=/pages/riches/current/current",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.buy4 {
  .eliminate {
    display: none;
  }
  .code {
    display: flex;
    background-color: #fafafa;
    align-items: center;
    input {
      background-color: #ffffff;
      height: 60rpx;
      border-radius: 16rpx;
    }
  }
  background-color: #fafafa;
  padding-top: 40rpx;
  > view {
    margin: 20rpx 24rpx;
    border-radius: 16rpx;
  }
  .money {
    background-color: rgb(255, 255, 255);
    padding: 30rpx 28rpx;

    > view {
      padding: 10rpx 0;
      text {
        color: red;
      }
    }
    .black {
      color: #333333;
      font-size: 24rpx;
    }
    .earnings {
     background-color: #fff1f1;
      padding-left: 24rpx;
      height: 72rpx;
      border-radius: 8rpx;
      align-items: center;
      display: flex;
      text {
        color: #ff4658;
      }
    }
    .input {
      display: flex;
      align-items: center;
      input {
        font-size: 72rpx;
        height: 80rpx;
      }
    }
    image {
      height: 20rpx;
      width: 20rpx;
    }
  }
  .payment {
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    font-size: 28rpx;
    > view {
      display: flex;
      align-items: center;
      > view {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 20rpx;
        color: #cdcdcd;
      }
    }
  }
  .checkbox-group {
    color: #999999;
    font-size: 24rpx;
    text {
      color: #333333;
    }
  }
  button {
    margin-top: 40rpx;
    margin: 0 24rpx;
    color: #ffffff;
    background-color: red;
    border-radius: 16rpx;
  }
  .txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20rpx;
    color: #cdcdcd;
    font-size: 22rpx;
    > view {
      padding-bottom: 16rpx;
    }
  }
  .image {
    width: 10rpx;
    height: 20rpx;
    padding-right: 16rpx;
    transform: scaleX(-1);
  }
}
</style>
